<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${sessionScope.ctx}/assets/js/home/search.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchForm = document.getElementById('searchForm');
        const searchInput = document.getElementById('searchMovieInput');

        searchForm.addEventListener('submit', function (e) {
            e.preventDefault();
            <%--打开模态框--%>
            searchModal.showModal();
            const searchName = searchInput.value;
            useSearchModal(searchName);
            console.log('Searched for:', searchName);
        });
    });
</script>
<%--顶部导航栏--%>
<nav class="flex w-full justify-center bg-base-200 max-h-16">
    <%--搜索模态框--%>
    <dialog id="searchModal" class="modal modal-bottom sm:modal-middle sm:w-min-md">
        <div class="modal-box">
            <h3 class="select-none text-center text-lg font-bold">搜索结果</h3>
            <div class="modal-action flex-col">
                <ul id="searchMovieList" class="max-w-md space-y-2 rounded-lg border bg-white p-4">
                    <%-- 搜索的数据展示位 --%>
                </ul>
                <form method="dialog" class="mt-3">
                    <button class="btn btn-outline mx-auto flex w-5/12">关闭</button>
                </form>
            </div>
        </div>
    </dialog>

    <div class="sticky top-0 z-50 mx-32 navbar md:mx-16 lg:mx-32">
        <div class="flex-1">
            <a class="text-xl btn btn-ghost" href="${sessionScope.ctx}/home">${applicationScope.appTitle}</a>
        </div>
        <div class="flex-none gap-4">
            <%--影片搜索框--%>
            <div class="w-full max-w-sm form-control">
                <form class="join" id="searchForm">
                    <label for="searchMovieInput">
                        <input type="text" name="searchMovieName" id="searchMovieInput"
                               class="join-item input input-bordered focus:outline-none" placeholder="影片名"
                               required=""/>
                    </label>
                    <button name="subscribe" class="btn btn-success join-item" type="submit">
                        Search
                    </button>
                </form>
            </div>
            <%--用户头像--%>
            <div class="flex-none neutral-content mr-4 border rounded-full">
                <div class="dropdown dropdown-end flex justify-between">
                    <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar mr-2">
                        <div class="w-full rounded-full ring-gary-100 ring-1">
                            <c:if test="${empty sessionScope.userAvatarUrl}">
                                <img alt="User Avatar" src="${sessionScope.ctx}/assets/img/svg/visited-person.svg"/>
                            </c:if>
                            <c:if test="${not empty sessionScope.userAvatarUrl}">
                                <img alt="User Avatar" src="${sessionScope.userAvatarUrl}"/>
                            </c:if>
                        </div>
                    </div>
                    <div tabindex="0" role="button" class="flex mr-2 justify-center items-center">
                        <c:choose>
                            <c:when test="${sessionScope.isLogin && sessionScope.isAdmin}">
                                <span class="select-none">管理员</span>
                            </c:when>
                            <c:when test="${sessionScope.isLogin && !sessionScope.isAdmin}">
                                <span class="select-none">普通用户</span>
                            </c:when>
                            <c:otherwise>
                                <span class="select-none">未登录</span>
                            </c:otherwise>
                        </c:choose>
                    </div>
                    <ul tabindex="0" class="person-dropdown">
                        <c:if test="${sessionScope.isLogin}">
                            <li><a>我的收藏</a></li>
                            <li><a>观看历史</a></li>
                            <c:if test="${sessionScope.isAdmin}">
                                <li><a href="${sessionScope.ctx}/admin">控制台</a></li>
                            </c:if>
                            <li><a href="${sessionScope.ctx}/api/auth?action=logout">退出登录</a></li>
                        </c:if>
                        <c:if test="${!sessionScope.isLogin}">
                            <li><a href="${sessionScope.ctx}/login">前往登录</a></li>
                        </c:if>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>